import React, { useState, useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import { Button, Table, Popconfirm, message, Tooltip } from 'antd';
import EditActivityModal from './Components/EditActivityModal'
import api from '../../api/activityManage'

const ActivityManage = (props) => {
    
    const [state, setState] = useState({
        searchData: {
            page: 1,
            rows: 10
        },
        activitiesList:[],//列表数据
        activitiesListTotal:0,//列表总数
        editModal:{//编辑数据
            visible: false,
            title:'新建活动',
            data:{}
        },
    });

    //更新state
    const updateState = (newState) => {
        let data = JSON.parse(JSON.stringify(state))
        setState(Object.assign({}, data, newState))
    }
    useEffect(()=>{
        getList()
    },[])
    const columns = [
        { title: '活动名称', dataIndex: 'name', key: 'name', width: 80, },
        { title: '活动类型', dataIndex: 'actType', key: 'actType', render: (text, record) => (
            <span>{record.actType==1?'积分活动':'暂时只有积分活动'}</span>
            ),
        },
        {
            title: '活动时间', dataIndex: 'ccc', key: 'ccc',width:150, render: (text, record) => {
                if (record.beginTime !== "") {
                    return (
                        <div>
                            <div>起：{record.beginTime}</div>
                            <div>至：{record.endTime}</div>
                        </div>
                    )
                } else {
                    return <span>不限期</span>
                }
            }
        },
        { title: '活动页打开UV', dataIndex: 'uv1Num', key: 'uv1Num', },
        { title: '活动主页登陆人数', dataIndex: 'loginPeopleNum', key: 'loginPeopleNum', },
        { title: '分享人数', dataIndex: 'sharePeopleNum', key: 'sharePeopleNum', },
        { title: '分享次数', dataIndex: 'shareCountNum', key: 'shareCountNum', },
        { title: '分享打开UV', dataIndex: 'uv2Num', key: 'uv2Num', },
        { title: '新增用户数', dataIndex: 'newUserNum', key: 'newUserNum', },
        { title: '新增名片数', dataIndex: 'newCardNum', key: 'newCardNum', },
        { title: '状态', dataIndex: 'status', key: 'status', render: (text, record) => (
            <span>{record.status==1?'有效':'无效'}</span>
            ),
        },
        {
            title: '活动数据', dataIndex: 'kkk', key: 'kkk',width:120, render: (text, record) => (
                <div>
                    <Button type="link" onClick={()=>{goToPage(1,record)}}>分发渠道数据</Button>
                    <Button type="link" onClick={()=>{goToPage(2,record)}}>参与用户列表</Button>
                    {/* <Button type="link" onClick={()=>{goToPage(5,record)}}>活动数据</Button> */}
                </div>
            ),
        },
        {
            title: '操作', dataIndex: 'lll', key: 'lll',width:120, render: (text, record) => (
                <div>
                    <Button type="link" onClick={()=>{showModal(2,record)}}>编辑</Button>
                    <Button type="link" onClick={()=>{goToPage(3,record)}}>奖品管理</Button>
                    <Button type="link" onClick={()=>{goToPage(4,record)}}>课程管理</Button>
                </div>
            ),
        },        
    ];
    const pageObj = {// 表格分页对象
        size: "small",
        total: state.activitiesListTotal,
        pageSize: state.searchData.rows,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: () => `共 ${state.activitiesListTotal} 条`,
        onChange: (page) => {
            getList({page:page})
        },
        onShowSizeChange: (page, rows) => {
            getList({page:1,rows:rows})
        }
    }
    // 获取列表
    const getList = (data)=>{
        let obj = Object.assign({},state.searchData,data?data:{})
        api.getActivitiesList(obj,(res)=>{
            console.log(res)
            updateState({
                searchData:obj,
                activitiesList:res.recordList,
                activitiesListTotal:res.totalCount
            })
        })
    }
    //跳转
    const goToPage = (type,data)=>{
        let pathname = ''
        switch (type){
            case 1://分发渠道数据
                pathname = '/activityManage/channelList'
                break
            case 2://参与用户列表
                pathname = '/activityManage/userList'
                break
            case 3://奖品管理
            pathname = '/activityManage/giftManage'
                break
            case 4://课程管理
            pathname = '/activityManage/classManage'
                break
            case 5://活动数据
                break
        }
        props.history.push({
            pathname:pathname,
            search:`actId=${data.id}`
        })
    }
    //添加和编辑
    const showModal = (type,data)=>{
        // type:1-添加；2-编辑；3-关闭；4-关闭并调获取列表
        if(type==4){
            api.getActivitiesList(state.searchData,(res)=>{
                updateState({
                    activitiesList:res.recordList,
                    activitiesListTotal:res.totalCount,
                    editModal:{
                        visible:type>2?false:true,
                        title:type==1?'新建活动':'编辑活动',
                        data:{}
                    }
                })
            })
        }else{
            updateState({
                editModal:{
                    visible:type>2?false:true,
                    title:type==1?'新建活动':'编辑活动',
                    data:data
                }
            })
        }
    }
    return (
        <div>
            <div style={{ marginBottom: 30, paddingTop: 20 }}>
                <div className="clearfix" >
                    <Button type="primary" onClick={()=>{showModal(1,{})}}>新建活动</Button>
                </div>
            </div>
            <Table
                pagination={false}
                columns={columns}
                dataSource={state.activitiesList}
                pagination={pageObj}
                rowKey="id"
            />
            {/* 编辑活动模态框 */}
            <EditActivityModal editModal={state.editModal} showModal={showModal} getList={getList}></EditActivityModal>
        </div>
    )
}

export default withRouter(ActivityManage)